<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>接收详情</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          icon="el-icon-back"
          @click="goBack"
        >返回</el-button>
      </div>
      
      <el-descriptions class="margin-top" :column="2" border>
        <el-descriptions-item label="接收状态">
          <el-tag :type="getStatusType(form.receiptStatus)">{{ getStatusText(form.receiptStatus) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="实际接收数量">{{ form.actualQuantity }}</el-descriptions-item>
        <el-descriptions-item label="接收时间">{{ form.receiptTime }}</el-descriptions-item>
        <el-descriptions-item label="接收反馈">{{ form.feedback }}</el-descriptions-item>
      </el-descriptions>

      <!-- 捐赠信息 -->
      <el-divider content-position="left">捐赠信息</el-divider>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="捐赠者">{{ donation.donorName }}</el-descriptions-item>
        <el-descriptions-item label="捐赠数量">{{ donation.quantity }}</el-descriptions-item>
        <el-descriptions-item label="捐赠状态">
          <el-tag :type="getDonationStatusType(donation.status)">{{ getDonationStatusText(donation.status) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="预计送达日期">{{ donation.expectedDeliveryDate }}</el-descriptions-item>
        <el-descriptions-item label="实际送达日期">{{ donation.actualDeliveryDate }}</el-descriptions-item>
        <el-descriptions-item label="物流单号">{{ donation.trackingNumber }}</el-descriptions-item>
      </el-descriptions>

      <!-- 运输信息 -->
      <el-divider content-position="left">运输信息</el-divider>
      <el-descriptions v-if="transport.transportId" :column="2" border>
        <el-descriptions-item label="承运商">{{ transport.carrierName }}</el-descriptions-item>
        <el-descriptions-item label="运输状态">
          <el-tag :type="getTransportStatusType(transport.status)">{{ getTransportStatusText(transport.status) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="司机姓名">{{ transport.driverName }}</el-descriptions-item>
        <el-descriptions-item label="司机电话">{{ transport.driverPhone }}</el-descriptions-item>
        <el-descriptions-item label="车牌号">{{ transport.vehicleNumber }}</el-descriptions-item>
        <el-descriptions-item label="当前位置">{{ transport.currentLocation }}</el-descriptions-item>
        <el-descriptions-item label="运输路线" :span="2">{{ transport.route }}</el-descriptions-item>
      </el-descriptions>
      <el-empty v-else description="暂无运输信息"></el-empty>
    </el-card>
  </div>
</template>

<script>
import { getReceipt } from "@/api/aid/receipt";

export default {
  name: "ReceiptDetail",
  data() {
    return {
      // 接收信息
      form: {},
      // 捐赠信息
      donation: {},
      // 运输信息
      transport: {}
    };
  },
  created() {
    const receiptId = this.$route.params.id;
    this.getReceiptInfo(receiptId);
  },
  methods: {
    /** 获取接收详细信息 */
    getReceiptInfo(receiptId) {
      getReceipt(receiptId).then(response => {
        this.form = response.data;
        if (response.data.donation) {
          this.donation = response.data.donation;
        }
        if (response.data.transport) {
          this.transport = response.data.transport;
        }
      });
    },
    /** 返回按钮操作 */
    goBack() {
      this.$router.go(-1);
    },
    /** 获取接收状态样式 */
    getStatusType(status) {
      if (status === '0') return 'info';
      if (status === '1') return 'success';
      if (status === '2') return 'warning';
      return 'danger';
    },
    /** 获取接收状态文本 */
    getStatusText(status) {
      if (status === '0') return '未接收';
      if (status === '1') return '已接收';
      if (status === '2') return '部分接收';
      return '拒收';
    },
    /** 获取捐赠状态样式 */
    getDonationStatusType(status) {
      if (status === '0') return 'info';
      if (status === '1') return 'primary';
      if (status === '2') return 'success';
      return 'danger';
    },
    /** 获取捐赠状态文本 */
    getDonationStatusText(status) {
      if (status === '0') return '待确认';
      if (status === '1') return '运送中';
      if (status === '2') return '已送达';
      return '已取消';
    },
    /** 获取运输状态样式 */
    getTransportStatusType(status) {
      if (status === '0') return 'info';
      if (status === '1') return 'primary';
      if (status === '2') return 'success';
      return 'danger';
    },
    /** 获取运输状态文本 */
    getTransportStatusText(status) {
      if (status === '0') return '待发货';
      if (status === '1') return '运输中';
      if (status === '2') return '已送达';
      return '已取消';
    }
  }
};
</script> 